<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { storeToRefs } from 'pinia'
import { handleScrollShow, debounce } from '@/utils'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cart'

const { cartList } = storeToRefs(useCartStore())
const router = useRouter()
const { isAuthDialogShow, isLogin } = storeToRefs(useAuthStore())
// 搜索框
const keyword = ref('')
const handleGoodsSearch = () => {
  router.push({
    path: '/list/0',
    query: {
      keyword: keyword.value
    }
  })
  keyword.value = ''
}

// 控制导航栏显示隐藏
const isNavBarShow = ref(false)
const headerRef = ref<HTMLElement>()
// 监听滚动事件
onMounted(() => {
  window.addEventListener(
    'scroll',
    debounce(() => (isNavBarShow.value = handleScrollShow(headerRef.value?.offsetHeight)), 100)
  )
})

// 导航栏列表
const navList = [
  {
    name: '首页',
    path: '/home'
  },
  {
    name: '无暇底妆',
    path: '/list/1'
  },
  {
    name: '国风彩妆',
    path: '/list/2'
  },
  {
    name: '实力锁妆',
    path: '/list/3'
  },
  {
    name: '温和净卸',
    path: '/list/4'
  },
  {
    name: '匠心妆具',
    path: '/list/5'
  },
  {
    name: '关于昙韵',
    path: '/about'
  },
  {
    name: '联系我们',
    path: '/contact'
  }
]
console.log('CART', cartList)
const baseURL = import.meta.env.VITE_BASE_URL

const handleToBagsPage = () => {
  if (!isLogin.value) {
    isAuthDialogShow.value = true
    return
  }

  router.push('/bags')
}
</script>

<template>
  <!-- 一直存在的头部 -->
  <header ref="headerRef" class="w-1280px mx-auto pb-0">
    <div class="flex justify-between items-center">
      <ul class="flex gap-12 items-center text-gray-600">
        <li class="flex items-center">
          <a-popover position="bl" trigger="hover">
            <span class="cursor-pointer">关注我们</span>
            <template #content>
              <div class="flex gap-4">
                <img src="@/assets/img/ewm2.png" class="w-200px" alt="" />
                <img src="@/assets/img/dy_ewm.png" class="w-200px" alt="" />
              </div>
            </template>
          </a-popover>
        </li>
        <li class="flex items-center">
          <a-popover position="br" trigger="hover">
            <span class="cursor-pointer">加入社群</span>
            <template #content>
              <div>
                <img src="@/assets/img/qun_ewm.jpg" class="w-300px" alt="" />
              </div>
            </template>
          </a-popover>
        </li>
      </ul>
      <div class="h-80px">
        <img
          @click="$router.push({ name: 'home' })"
          class="w-full h-full object-cover cursor-pointer"
          src="@/assets/img/logo2.png"
          alt=""
        />
      </div>
      <ul class="flex gap-12 items-center text-gray-600">
        <li class="flex items-center">
          <icon-user class="w-20px h-20px mr-5px" />
          <!-- TODO:判断登录状态 -->
          <span class="cursor-pointer" v-if="isLogin" @click="$router.push('/user')">我的账户</span>
          <span class="cursor-pointer" v-else @click="isAuthDialogShow = true">登录</span>
        </li>
        <li class="items-center cursor-pointer">
          <a-popover position="br" trigger="hover" v-if="isLogin">
            <div class="flex items-center cursor-pointer" @click="handleToBagsPage">
              <img src="@/assets/svg/bags.svg" class="w-20px h-20px mr-5px" alt="" />
              <span class="">购物袋</span>
            </div>

            <template #content>
              <div class="overflow-y-auto h-200px px-4 min-w-200px">
                <div
                  v-if="cartList.length"
                  class="flex my-10px justify-between"
                  v-for="item in cartList"
                  :key="item.id"
                >
                  <div class="flex my-10px gap-4">
                    <img :src="baseURL + item.cover" alt="" class="w-80px h-80px object-cover" />
                    <div>
                      <p>{{ item.name }}</p>
                      <p class="text-error">￥{{ item.price }}</p>
                    </div>
                  </div>
                  <div class="flex flex-col my-10px gap-4">
                    <p>x {{ item.goodsNum }}</p>
                    <p class="text-error">￥{{ item.goodsNum * item.price }}</p>
                  </div>
                </div>
                <div v-else>
                  <a-empty class="mt-50px" description="快去选择心仪的商品吧" />
                </div>
              </div>
              <div class="flex justify-between border-t pt-3 border-gray-3">
                <div class="flex flex-col gap-2 justify-center items-center">
                  <p>
                    商品合计:
                    <span class="text-error"
                      >￥{{ cartList.reduce((pre: number, cur: any) => pre + cur.goodsNum * cur.price, 0) }}</span
                    >
                  </p>
                </div>
                <a-button type="primary" status="success" @click="$router.push('/bags')">去结算</a-button>
              </div>
            </template>
          </a-popover>
          <div v-else class="flex items-center cursor-pointer" @click="handleToBagsPage">
            <img src="@/assets/svg/bags.svg" class="w-20px h-20px mr-5px" alt="" />
            <span class="">购物袋</span>
          </div>
        </li>
      </ul>
    </div>
    <ul class="w-full p-4 flex items-center justify-between">
      <li v-for="{ path, name } in navList" :key="name">
        <router-link :to="{ path: path }" class="cursor-pointer text-primary hover:text-dark hover:font-600">
          {{ name }}
        </router-link>
      </li>

      <li class="">
        <a-input-search
          v-model="keyword"
          @search="handleGoodsSearch"
          class="w-320px"
          placeholder="请输入搜索内容"
          size="large"
        />
      </li>
    </ul>
  </header>

  <!-- 固定在顶部的导航栏 -->
  <Transition>
    <div class="w-full pos-fixed top-0 z-100 bg-white" v-show="isNavBarShow">
      <div class="w-1280px mx-auto p-10px flex justify-between items-center">
        <div class="w-130px">
          <img
            @click="$router.push({ name: 'home' })"
            class="w-full h-full cursor-pointer"
            src="@/assets/img/logo.png"
            alt=""
          />
        </div>

        <ul class="flex gap-8 items-center text-gray-600">
          <li
            v-for="{ path, name } in navList.slice(0, 6)"
            :key="name"
            class="flex items-center hover:text-primary hover:font-600 cursor-pointer"
          >
            <router-link :to="{ path: path }">
              {{ name }}
            </router-link>
          </li>
        </ul>

        <ul class="flex gap-8 items-center text-gray-600">
          <li class="">
            <a-input-search
              v-model="keyword"
              @search="handleGoodsSearch"
              class="w-240px"
              placeholder="请输入搜索内容"
              size="large"
            />
          </li>
          <li class="flex items-center">
            <icon-user class="w-20px h-20px mr-5px" />
            <!-- TODO:判断登录状态 -->
            <span class="cursor-pointer" v-if="isLogin" @click="$router.push('/user')">我的账户</span>
            <span class="cursor-pointer" v-else @click="isAuthDialogShow = true">登录</span>
          </li>
          <li class="items-center cursor-pointer">
            <a-popover position="br" trigger="hover" v-if="isLogin">
              <div class="flex items-center cursor-pointer" @click="handleToBagsPage">
                <img src="@/assets/svg/bags.svg" class="w-20px h-20px mr-5px" alt="" />
                <span class="">购物袋</span>
              </div>

              <template #content>
                <div class="overflow-y-auto h-200px px-4 min-w-200px">
                  <div
                    v-if="cartList.length"
                    class="flex my-10px justify-between"
                    v-for="item in cartList"
                    :key="item.id"
                  >
                    <div class="flex my-10px gap-4">
                      <img :src="baseURL + item.cover" alt="" class="w-80px h-80px object-cover" />
                      <div>
                        <p>{{ item.name }}</p>
                        <p class="text-error">￥{{ item.price }}</p>
                      </div>
                    </div>
                    <div class="flex flex-col my-10px gap-4">
                      <p>x {{ item.goodsNum }}</p>
                      <p class="text-error">￥{{ item.goodsNum * item.price }}</p>
                    </div>
                  </div>
                  <div v-else>
                    <a-empty class="mt-50px" description="快去选择心仪的商品吧" />
                  </div>
                </div>
                <div class="flex justify-between border-t pt-3 border-gray-3">
                  <div class="flex flex-col gap-2 justify-center items-center">
                    <p>
                      商品合计:
                      <span class="text-error"
                        >￥{{ cartList.reduce((pre: number, cur: any) => pre + cur.goodsNum * cur.price, 0) }}</span
                      >
                    </p>
                  </div>
                  <a-button type="primary" status="success" @click="$router.push('/bags')">去结算</a-button>
                </div>
              </template>
            </a-popover>
            <div v-else class="flex items-center cursor-pointer" @click="handleToBagsPage">
              <img src="@/assets/svg/bags.svg" class="w-20px h-20px mr-5px" alt="" />
              <span class="">购物袋</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
:deep(.arco-input-wrapper.arco-input-focus) {
  border-color: #76a5af;
}

:deep(.arco-input-search .arco-input-suffix) {
  font-size: 20px;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.2s ease;
}

.v-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}

.v-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}
</style>
